<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>仓储系统--战区管理</title>
<style>
    *{margin:0px;padding:0px;}
    a{color:#999;
        text-decoration: none;
    }
    body{background:#eee;}
    .top{
        background:white;
        height:20px;
        border-bottom:1px solid #ccc;
        padding:20px;
        padding-top:5px;
    }
    .logo{float:left;font-size:18px;margin-top:5px;}
    .other{float:right;height:30px;
    line-height: 30px;}
    .notice_icon{float:left;margin-left:10px;margin-right:20px;
    position:relative;}
    .user_info{float:left;}
    .notice_icon span{
        position: absolute;
        border-radius: 100%;
        right:-3px;
        top:0px;
        width:16px;
        height:16px;
        line-height: 16px;
        font-size:12px;
        background:red;
        color:white;
        text-align:center;
        display:block;
    }
    .cnt{overflow: hidden;}
    .nav{
        width:15%;
        float:left;
        text-align: center;
    }
    li{
        height:40px;
        line-height:40px;

    }
    h3{
        margin-top:10px;
        margin-bottom:10px;
    }
    .main{
        width:85%;
        float:left;
        background:white;
        padding:20px;
        margin-top:10px;
        box-sizing: border-box;
    }
    .bot{
        border-top:1px solid #ccc;
        text-align: center;
        font-size:14px;
        color:#999;
        margin-top:10px;
        padding-top:10px;
    }
    .btn{
        width:100px;
        height:36px;
        color:white;
        font-size:14px;
        line-height: 36px;
        background:orange;
        margin-top:30px;
        text-align: center;
        border-radius: 3px;
        margin-right:20px;
    }
    .main_top{
        position:relative;
        overflow:hidden;
        padding-bottom: 10px;
    }
    #stitle{
        position:absolute;
        left:0px;
        top:40px;
    }
    .main_top h3{
        float:left;
    }
    .main_top .btn{
        float:right;
    }
    .input_div{
        margin-top:10px;
        margin-bottom:10px;
    }
    input{
        width:200px;
        height:24px;
        outline: none;
        padding-left:5px;
    }
    #list_div{
        border-radius: 5px;
    }
    .list{
        height:40px;
        line-height: 40px;
        color:#333;
    }
    .edit_a{
        margin-right:10px;
    }
    .ntime{
        float:right;
    }
    #search_btn{
        position:absolute;
        left:185px;
        top:45px;
        cursor: pointer;
    }
    td{
        text-align: center;
        font-size:14px;
        color:#333;
    }
    .theader{
        background:#eee;
        color:#666;
        padding:10px;

    }
    .theader th{
        padding:10px;
        font-weight: 100;
        font-size:14px;
    }
</style>
</head>
<body>
    <div class="all">
        <div class="top">
            <div class="logo">仓储系统</div>
            <div class="other">
                <div class="notice_icon"><span>5</span>
                    <img src="images/notice.png" width="24" style="margin-top:2px;" />
                </div>
                <div class="user_info"><img width="30" src="images/touxiang.png" />
                </div>
            </div>
        </div>
        <div class="cnt">
            <div class="nav">
                <div class="item">
                    <h3>总部管理</h3>
                    <ul>
                        <li>
                            <a href="index.html">通知公告(孙士龙)</a>
                        </li>
                        <li  style="background:black;color:white">
                            <a href="zhanqu.html">战区管理(王乔)</a></li>
                        <li>版本管理</li>
                    </ul>
                </div>
                <div class="item">
                    <h3>总部管理</h3>
                    <ul>
                        <li>版本管理</li>
                        <li>版本管理</li>
                        <li>版本管理</li>
                    </ul>
                </div>
            </div>
            <div class="main">
                <div class="main_top">
                    <h3>战区管理</h3>
                    <div class="search">
                        <input id="stitle" placeholder="战区名称/战区编码" />
                        <img id="search_btn"
                             onclick="search()"
                             width="16" src="images/search.png" />
                    </div>
                    <div class="btn" id="add_btn" onclick="add()">新增战区</div>
                   <div class="btn" id="save_btn" style="display:none" onclick="save()">保存</div>
                </div>
                <div id="loading" style="text-align: center;height:300px;line-height: 300px">
                    <img src="https://gd-hbimg.huaban.com/3099e765b298074ac966b5b9b09b01abab1914cdfaab-OsdLGk_fw658" />
                </div>
                <div id="list_div">

                </div>
                <div id="add_div" style="display:none;">
                    <div class="input_div">战区名称：<input id="zname"  /></div>
                    <div class="input_div">战区编码：
                        <input id="code"  />
                    </div>
                    <div class="input_div">负责人名称：
                        <input id="admin_name"  />
                    </div>
                    <div class="input_div">负责人联系方式：
                        <input id="admin_tel"  />
                    </div>

                </div>
            </div>
        </div>
        <div class="bot">
            Copyright © 2022-2023 XINLING. All Rights Reserved.
        </div>
    </div>
<script>
    var zhanqus = [];
    loadData();

    function showData(arr){
        list_div.innerHTML = "";
        if(arr.length==0){
            list_div.innerHTML = "暂无数据";
            return;
        }
        var allhtml = "";
        allhtml += "<table cellpadding='0' cellspacing='0'" +
            " width='100%'><tr class='theader'>" +
            "<th>战区名称</th><th>战区编码</th><th>负责人</th>" +
            "<th>负责人联系方式</th><th>操作</th></tr>";
        for(var i=arr.length-1;i>=0;i--){
            var a = arr[i];
            allhtml +=
                "<tr class='list'>" +
                "<td class='ntitle'>"+a.name+"</td>" +
                "<td class='ntitle'>"+a.code+"</td>" +
                "<td class='ntitle'>"+a.admin_name+"</td>" +
                "<td class='ntitle'>"+a.admin_tel+"</td>" +
                "<td class='ntitle'><a class='edit_a' href='#'>编辑</a>" +
                "<a class='del_a' onclick='del("+a.id+")' href='javascript:;'>删除</a></td>" +
                "</tr>";
        }
        allhtml += "</table>";
        list_div.innerHTML = allhtml;
    }

    function search(){
        loadData({name:stitle.value,code:stitle.value});
    }

    function loadData(data){
        list_div.innerHTML = "";
        loading.style.display = "block";
        var req = new XMLHttpRequest();
        req.open("post","/find_all_zhanqu");
        req.setRequestHeader("content-Type","application/json;charset=utf-8");
        if(!data) data = {}
        req.send(JSON.stringify(data));
        req.onreadystatechange = function(){
            if(req.readyState==4&&req.status==200){
                zhanqus = JSON.parse(req.responseText);
               showData(zhanqus);
               loading.style.display = "none";
            }
        }
    }

    function save(){
        var req = new XMLHttpRequest();
        req.open("post","/add_zhanqu");
        req.setRequestHeader("content-Type","application/json;charset=utf-8");
        var data = {
            name:zname.value,
            code:code.value,
            admin_name:admin_name.value,
            admin_tel:admin_tel.value
        }
        req.send(JSON.stringify(data));
        req.onreadystatechange = function(){
            if(req.readyState==4&&req.status==200){
                if(req.responseText.trim()=="1"){
                    alert("新增成功！");
                }

                loadData();
                add_div.style.display = "none";
                list_div.style.display = "block";
                save_btn.style.display = "none";
                add_btn.style.display = "block";
            }
        }
    }

    function del(id){
        if(!confirm("您确定要删除这个数据吗？")){
            return;
        }
        var req = new XMLHttpRequest();
        req.open("post","/del_zhanqu");
        req.setRequestHeader("content-Type","application/json;charset=utf-8");
        var data = {
            id:id
        }
        req.send(JSON.stringify(data));
        req.onreadystatechange = function(){
            if(req.readyState==4&&req.status==200){
                if(req.responseText.trim()=="1"){
                    alert("删除成功！");
                }

                loadData();
            }
        }
    }

    function add(){
        add_div.style.display = "block";
        list_div.style.display = "none";
        save_btn.style.display = "block";
        add_btn.style.display = "none";
    }
</script>
</body>
</html>
